<template>
	<view class="page-box pad-30">
		<view class="bg-white pad-30 radius30">
			<view class="centerXY columnY color-text">
				<image class="avatar" :src="workerData.avatar" mode="aspectFill"></image>
				<view class="mar-top-20">姓名：{{workerData.name}}</view>
				<view class="mar-top-20">性别：{{ workerData.gender ==1 ? "男" :"女"}}</view>
			</view>
			<view v-if="withWork == 1">
				<view class="mar-top-50 font-28">服务项目：</view>
				<view class="flex list-box mar-top-30">
					<view class="list pad-20 radius10" :class="onList.indexOf(item.work_id) == -1 ? '' : 'on'"
						v-for="item in  workerList" :key="item.work_id" @click="hanldeClick(item.work_id)">
						<view class="font-28">{{item.name}}</view>
						<view class="font-28 mar-top-10 text-right">
							<text class="color-error">{{item.order_price}}</text>
							<text>/{{item.unit}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="mar-top-50 font-28">工人介绍：</view>
			<view class="mar-top-30 font-26">{{workerData.desc}}</view>
		</view>

		<view v-if="withWork == 1" class="button-bottom centerXY">
			<view @click="hanldeSubmit" class="btn font-32 mar-left-20 button-style">确定</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
	} from 'vue';
	import {
		workerInfo,
		workerMultiSkill
	} from '@/api/index.js'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	// 获取工人信息
	const workerData = ref({});
	const workerList = ref([]);
	const getWorkerInfo = () => {
		workerInfo({
			worker_id: props.value.worker_id,
			with_work: withWork.value,
		}).then(res => {
			workerData.value = res.data.info;
			workerList.value = res.data.worker_skills;
		})
	}

	// 选中取消
	const hanldeClick = (id) => {
		if (onList.value.includes(id)) {
			onList.value = onList.value.filter(i => i !== id);
		} else {
			onList.value.push(id);
		}
	}

	const hanldeSubmit = () => {
		if (onList.value.length > 0) {
			let data = [{
				worker_id: props.value.worker_id,
				work_ids: onList.value
			}]

			uni.redirectTo({
				url: `/pages/order/confirmOrder/confirmOrder?type=shop&data=${JSON.stringify(data)}`
			})
		} else {
			uni.$u.toast('请选择服务项目');
		}
	}

	const props = ref({});
	const onList = ref([]);
	const withWork = ref(1);
	onLoad((option) => {
		props.value = option;
		if (option.with_work != undefined) {
			withWork.value = option.with_work;
		}
		if (option.worker) {
			onList.value = JSON.parse(option.worker);
		}

		if (option.worker_id) {
			getWorkerInfo();
		}
	})
</script>

<style scoped>
	.page-box {
		padding-bottom: 180rpx;
	}

	.avatar {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
	}

	.list-box {
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.list {
		width: calc(50% - 10rpx);
		background: rgba(0, 85, 254, .1);
	}

	.on {
		border: 1px solid #0055FE;
	}

	.button-bottom {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background: white;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		z-index: 2;
	}

	.btn {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
	}
</style>